<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>私教列表</title>
    <script src="js/flexible.js"></script>
    <link rel="stylesheet" href="css/flexible.css">
    <link rel="stylesheet" href="css/flex.css">

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/mobiscroll.custom-3.0.0-beta6.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css">
    <style>
        body {
            background-color: #F7F7F7;
            margin: 0px;
            padding: 0px;
        }
    </style>

    <script src="js/vue/vue.js"></script>
    <script src="js/vue/axios.js"></script>
    <script src="js/vue/qs.js"></script>
    <script src="js/vue/MD5.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <script src="js/mobiscroll.custom-3.0.0-beta6.min.js"></script>
    <script src="js/wxJs.js"></script>

</head>

<body>
    <div id="app">
        <div class="h10"></div>

        <div class="curriculum_head">

            <div ref="rl" class="rl" v-on:click="show = true">
                <img src="images/rl.png">
            </div>
            <div>
                <van-calendar v-model="show" @confirm="onConfirm" :show-confirm="false" />
            </div>
            <template>

                <div class="rq">

                    <ul>

                        <li v-for="item in dateList" :key="item.time" @click="getweakInfo(item.time)">

                            <span v-bind:class="{rq_check:item.check=='1'}" class="s">{{item.week}}</span><br>

                            <span v-bind:class="{rq_check:item.check=='1'}" class=" x">{{item.date}}</span>

                        </li>

                    </ul>

                </div>

            </template>

            <div class="clear"></div>

        </div>


        <div class="h10"></div>

        <div v-if="(kcData.length > 0)">

            <template>
                <div class="newcurriculum_jl" v-for="(item,index) in kcData">
                    <!-- 教练 -->
                    <div v-on:click="clickisOpen(item)"
                        style="display: flex;flex-direction:row;align-items:center;justify-content:space-between; height: 0.7rem; width: auto;">

                        <div style="display: flex;flex-direction:row;align-items:center;">
                            <div style="margin-left: 0.15rem;" flex="dir:left">
                                <van-image round fit="cover" width="0.38rem" height="0.38rem" :src="item.Picurl"
                                    error-icon="./images/user.png" />
                            </div>
                            <div style="font-size: 0.14rem; color: #333333; margin-left: 0.15rem;">
                                <span>{{item.Sname}}</span>
                            </div>
                        </div>
                        <div style=" display: flex;flex-direction:row;align-items:center;">
                            <div v-if="item.class.length > 0"
                                style="font-size: 0.12rem; color: #666666;margin-right: 0.15rem;">
                                {{item.open?"收起":"查看"}}
                                <img v-if="item.open" style="width: 10px;height: 7px;" src="./images/uparraw.png">
                                <img v-else style="width: 10px;height: 7px;" src="./images/downImg.png">
                            </div>
                            <div v-else="item.class.length > 0"
                                style="font-size: 0.14rem; color: #747474;margin-right: 0.15rem;">
                                今日未排课
                            </div>
                        </div>
                    </div>
                    <!-- 课程 -->
                    <div v-if="item.open" v-for="(item1,index1) in item.class">
                        <div
                            style="display: flex;flex-direction:row;align-items:center;justify-content:space-between;height: 0.55rem;">

                            <div style="display: flex;flex-direction:row;align-items:center;">
                                <div
                                    style="background-color: #1778FF; height: 8px; width: 8px; border-radius:4px; margin-left: 0.15rem;">
                                </div>
                                <div style="font-size: 0.15rem; color: #333333;margin-left: 0.04rem;">
                                    <b>{{item1.Title}}</b>
                                </div>
                            </div>

                            <div v-on:click="clickYuyue(item,index1)"
                                style="margin-right: 0.15rem;font-size: 0.11rem; color: #FFFFFF;width: 0.5rem;height: 0.22rem;border-radius:0.11rem;background-color: #1778FF;text-align: center;line-height: 0.22rem;">
                                预约
                            </div>

                        </div>
                    </div>

                </div>

                <div class="h10"></div>
            </template>
        </div>
        <!-- 无数据 -->
        <div class="notDate" v-else style="margin-top: .3rem;text-align: center;">

            <img src="images/notDate.png" />

        </div>

        <div style="height: 0.45rem;"></div>

        <!-- 底部 -->
        <div class="down">

            <div class="nav">

                <a href="index.html">

                    <img src="images/sy.png" alt="首页"><br>

                    <span>首页</span>

                </a>

            </div>

            <div class="nav">

                <a href="curriculum_t.html">

                    <img src="images/tk.png" alt="团课"><br>

                    <span>团课</span>

                </a>

            </div>

            <div class="nav navActive">

                <a href="curriculum_p.html">

                    <img src="images/sj_c.png" alt="私课"><br>

                    <span>私课</span>

                </a>

            </div>

            <div class="nav">

                <a href="shopindex.html">

                    <img src="images/sc.png" alt="商城"><br>

                    <span>商城</span>

                </a>

            </div>

            <div class="nav">

                <a href="my.html">

                    <img src="images/more.png" alt="更多"><br>

                    <span>更多</span>

                </a>

            </div>

        </div>
    </div>

</body>

<script>
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }


    var vm = new Vue({

        el: '#app',

        data: {
            show: false,
            date: '',

            dateList: [],

            kcData: [],

            from: {},

            currIndex: '0',

            vids: '',

        },

        created() {

            let time = ''


            var curr = new Date().format("yyyy-MM-dd");
            this.getweakInfo(curr);

        },

        methods: {
            //获取本周信息
            getweakInfo(time) {

                if (this.date == time) {
                    return;
                }
                var curr = new Date(time);

                var now = new Date(new Date().toLocaleDateString()).getTime();
                var currs = curr.getTime();

                if (currs < now) {
                    this.$toast("所选时间不小于今天")
                    return
                }


                this.getlists(time)

                this.date = time;
                ;
                var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
                var arr = ["日", "一", "二", "三", "四", "五", "六"];
                var list = [];
                for (let index = 0; index < arr.length; index++) {
                    const week = arr[index];
                    var last = first + index;

                    var lastday = new Date(time);
                    lastday.setDate(last);

                    var date = lastday.format("MM/dd");
                    var time1 = lastday.format("yyyy-MM-dd");
                    var check = 0;
                    if (time == time1) {
                        check = 1;
                    }
                    var dic = { "week": week, "date": date, "time": time1, "check": check };
                    list.push(dic);

                }
                this.dateList = list;

            },
            clickisOpen(item) {
                if (item.class.length > 0) {
                    item.open = !item.open;
                } else {
                    this.$toast("教练:" + item.Sname + " \n今日未排课");

                }
            },

            getlists(time) {

                const params = {

                    date: time

                }


                window.vant.Toast.loading({
                    mask: true,
                    message: '加载中...'
                });


                getVs()
                var that = this;
                axios.post('/mobileapi/member/curriculum_p.php?act=sjListNewS', Qs.stringify(params)).then(function (response) {
                    window.vant.Toast.clear();
                    let { data, code } = response.data
                    if (code !== 200) {
                        window.vant.Toast.fail(msg)
                    } else {
                        var array = data;
                        for (let index = 0; index < array.length; index++) {
                            const element = array[index];
                            element.open = false;
                        }
                        array.sort(function (a, b) {
                            let as = a.class.length > 0 ? 1 : 0;
                            let bs = b.class.length > 0 ? 1 : 0;
                            return bs - as;
                        })
                        that.kcData = array;
                    }
                    console.log(that.kcData);

                }).catch(function (error) {
                    window.vant.Toast.clear();
                    console.log(error);

                });
            },


            zkSq(index) {

                console.log(index)

                this.currIndex = index + 1

            },

            zkSqS(index) {

                console.log(index)

                this.currIndex = index

            },

            orderSk(Date, Key, PONEid, Pid) {

                window.location.href = 'curriculum_p_yvyue.html?date=' + Date + '&key=' + Key + '&poneid=' + PONEid + '&pid=' + Pid + ''

            },
            clickYuyue(item, index1) {

                var dateJson;
                this.dateList.forEach(element => {
                    if (element.check == 1) {
                        dateJson = JSON.stringify(element);
                    }
                });

                sessionStorage.setItem('ykdate', dateJson);
                sessionStorage.setItem('jlitem', JSON.stringify(item));
                window.location.href = './PrivateLessons/privateLessons.html?index=' + index1;
            },
            onConfirm(date) {
                this.show = false;
                var curr = date.format("yyyy-MM-dd");
                this.getweakInfo(curr);
            },

        }

    })

</script>

</html>